<template>
  <div class="dy-main">
    <div class="dy-header">
      <x-header :right-options="{showMore: true}" :left-options="{preventGoBack:true}" @on-click-back="back" @on-click-more="showMenus = true">标题</x-header>
    </div>
    <div class="dy-body">
      <x-input title="特殊字符判断" v-model="specialCharacter" @on-blur="regText('不能输入特殊字符', 'specialCharacter', specialCharacter, 0)" text-align="right" label-width="1.8rem"></x-input>
      <x-input title="银行卡卡号" v-model="cardNumber" @on-blur="regText('银行卡格式错误', 'cardNumber', cardNumber, 1)" text-align="right" label-width="1.8rem"></x-input>
      <x-input title="金额" v-model="money" @on-blur="regText('金额格式错误', 'money', money, 2)" text-align="right" label-width="1.8rem"></x-input>
      <x-input title="国内手机" v-model="phoneNumberA" @on-blur="regText('手机号码格式错误', 'phoneNumberA', phoneNumberA, 3)" text-align="right" label-width="1.8rem"></x-input>
      <x-input title="香港手机" v-model="phoneNumberB" @on-blur="regText('手机号码格式错误', 'phoneNumberB', phoneNumberB, 4)" text-align="right" label-width="1.8rem"></x-input>
      <x-button type="primary" @click.native="formcheck">点击校验</x-button>
      <div>{{ moneytest | filterMoney }}</div>
      <toast v-model="showPositionValue" type="text" width="6rem" :time="800" is-show-mask :text="errormsg" position="middle">{{ errormsg }}</toast>
    </div>
    <div class="dy-footer"></div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      specialCharacter: '',
      cardNumber: '',
      money: '',
      phoneNumberA: '',
      phoneNumberB: '',
      iconType: ['', '', '', '', ''],
      errormsg: '',
      showPositionValue: false,
      pupopicke: [],
      formVal: {
        cardNumber: {val: '', type: [{typeName: 'minLen', typeVal: '1', msg: '输入不能为空'}, {typeName: 'cardNumber', typeVal: '', msg: '银行卡号错误'}, {typeName: 'maxLen', typeVal: '24', msg: '最大长度不能'}]},
        money: {val: '2342.32', type: [{typeName: 'money', typeVal: '', msg: '金额格式错误'}, {typeName: 'minLen', typeVal: '1', msg: '金额不能为空'}]},
        phoneNumberA: {val: '13423423323', type: [{typeName: 'phoneNumber', typeVal: '', msg: '电话号码格式不正确'}, {typeName: 'minLen', typeVal: '1', msg: '电话号码不能为空'}]}
      },
      moneytest: '234234.234234'
    }
  },
  computed: { },
  methods: {
    back () {
      this.$publicFun.goBack(this)
    },
    regText (msg, type, val, index) {
      let carD = this.iconType.slice()
      if (!this.$publicFun.strIsEmptyOrNull(val)) {
        let lStr = this.$publicFun.stringFilter(val, type)
        lStr.isOK ? carD[index] = 'success' : carD[index] = 'error'
        if (!lStr.isOK) {
          this.errormsg = msg
          this.showPositionValue = true
        }
      } else {
        carD[index] = ''
      }
      this.iconType = carD
    },
    formcheck () {
      for (let key in this.formVal) {
        let lObj = this.formVal[key]
        let lRes = this.$publicFun.fromCheck(lObj)
        if (!lRes.isOK) {
          this.errormsg = lRes.msg
          this.showPositionValue = true
          return false
        }
      }
      // 这里写成功的代码
    }
  },
  mounted: function () {},
  watch: {
    pupopicke (val) {
      this.formVal.phoneNumberA.val = val[0]
    }
  }
}
</script>
<style>
</style>
